<template>
  <el-card shadow="never">
    <div class="descriptions_box">
      <table class="descriptions_table">
        <tr class="descriptions_row">
          <th class="descriptions_label">
            图片
          </th>
          <td class="descriptions_content">
            <el-upload
                :action="`/api/?m=upload&a=file&type=image&id=${id}`"
                list-type="picture-card"
                :auto-upload="true"
                :file-list="fileImgList"
                :on-success="successImg"
            >
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{file}">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </td>
        </tr>
        <tr class="descriptions_row">
          <th class="descriptions_label">
            文件
          </th>
          <td class="descriptions_content">
            <el-upload
                v-if="this.documentName === ''"
                :action="`/api/?m=upload&a=file&type=document&id=${id}`"
                multiple
                :limit="1"
                :file-list="fileList"
                :show-file-list="false"
                :on-success="successDocument"
            >
              <el-button size="small" type="primary">上传文件</el-button>
              <div slot="tip" class="el-upload__tip">只能上传word文件，且不超过10Mb</div>
            </el-upload>
            <div>
              <el-button v-if="this.documentName !== ''" type="primary" @click="downDucument()">下载</el-button>
              <el-button v-if="this.documentName !== ''" type="error" @click="delDucument()">删除</el-button>
              {{ this.documentName }}
            </div>
          </td>
        </tr>
      </table>
    </div>
  </el-card>
</template>
<script>
import { getInfo, delFile } from '@/api/file';

export default {
  data() {
    return {
      id: 0,
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      fileList: [],
      fileImgList: [],
      documentName: '',
      documentUrl: '',
      documentId: 0,
    };
  },
  mounted() {
    this.id = this.$route.params.id
    getInfo(this.id).then(res => {
      this.fileImgList = res.data.image
      if (res.data.document.length > 0) {
        this.documentName = res.data.document[0].name;
        this.documentUrl = res.data.document[0].url;
        this.documentId = res.data.document[0].id;
      }
    })
  },
  methods: {
    successImg(response, file, fileList) {
      if (response.data.id > 0) {
        file.id = response.data.id
        this.fileImgList.push(file)
      } else {
        this.$message.error(response.msg)
        fileList.pop()
      }
    },
    successDocument(response, file, fileList) {
      this.documentName = response.data.name;
      this.documentUrl = response.data.url;
      this.documentId = response.data.id;
    },
    delDucument() {
      this.$confirm('是否确认删除文件？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(_ => {
        delFile(this.documentId).then(res => {
          this.fileList = []
          this.documentUrl = ''
          this.documentName = ''
          this.documentId = 0
        })
      }).catch(() => {

      })

    },
    downDucument(){
      window.open(this.documentUrl)
    },
    handleRemove(file) {
      this.$confirm('是否确认删除图片？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(_ => {
        this.fileImgList.forEach((value, index) => {
          if (file.id === value.id) {
            delFile(file.id).then(res => {
              this.fileImgList.splice(index,1)
            })
          }
        })
      }).catch(() => {

      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },


    handleRemoveDocument(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    uploadAction() {
      this.fileList.push({name: 'ssssss', url: "22222"})
      console.log(222)
    }
  }
}
</script>
<style scoped lang="scss">
.descriptions_box {
  color: #606266;
  background-color: #fff;
  font-size: 12px;
}

.descriptions_box .descriptions_table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

.descriptions_label {
  padding: 10px;
  width: 100px;
}

.descriptions_box .descriptions_table .descriptions_label,.descriptions_box .descriptions_table .descriptions_content {
  box-sizing: border-box;
  text-align: left;
  font-weight: 400;
  line-height: 1.5;
  border: 1px solid #ebeef5;
  padding: 12px 10px;
}

.descriptions_label {
  font-weight: 700;
  color: #909399;
  background: #fafafa;
}
</style>
